<template>
  <div>
    <div class="search-box">
      <div class="search">
        <div class="left-title">
          <span @click="addClick('gmSort')">分类</span>
        </div>
        <div class="right-search">
          <span class="iconfont icon-big-mirror"></span>
          <input
            v-model="searchContent"
            type="text"
            placeholder="搜索感兴趣的内容"
          />
          <button @click="addSearch('gmSearch')">搜索</button>
        </div>
      </div>
    </div>

    <transition
      :duration="{ enter: 800, leave: 120 }"
      enter-active-class="animate__animated animate__fadeInLeft"
      enter-to-class="animate__animated animate__fadeInLeft"
      leave-active-class="animate__animated animate__fadeOutDown"
      leave-to-class="animate__animated animate__fadeOutDown"
    >
      <component
        :is="compName"
        :searchVal="searchContent"
        :flag="flag"
      ></component>
    </transition>

    <transition
      :duration="{ enter: 500, leave: 600 }"
      enter-active-class="animate__animated animate__fadeIn"
      enter-to-class="animate__animated animate__fadeIn"
      leave-active-class="animate__animated animate__fadeOut"
      leave-to-class="animate__animated animate__fadeOut"
    >
      <gm-mark v-if="markShow" @markClose="markClose"></gm-mark>
    </transition>
  </div>
</template>

<script>
import gmSort from "@/pages/sort.vue";
import gmSearch from "@/pages/search.vue";
import gmMark from "../components/gmMark.vue";

export default {
  name: "Fenlei",
  components: {
    gmSort,
    gmSearch,
    gmMark,
  },
  data() {
    return {
      compName: "gmSort",
      searchContent: "",
      flag: "",
      markShow: false,
    };
  },
  methods: {
    addClick(val) {
      this.compName = val;
      this.searchContent = "";
    },
    addSearch(val) {
      let inpValue = this.searchContent;
      if (inpValue == "") {
        this.markShow = true;
        return false;
      }
      this.compName = val;

      this.searchContent = inpValue;
      this.flag = true;
    },
    markClose(val) {
      this.markShow = val;
    },
  },
  watch:{
    searchContent(newVal,oldVal){
      if(newVal == ""){
        this.compName = "gmSort";
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  .search {
    width: 340px;
    display: flex;
    .left-title {
      flex-basis: 20%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        font-size: 22px;
      }
    }
    .right-search {
      flex-grow: 1;
      display: flex;
      align-items: center;
      background-color: #eee;
      border-radius: 2px;
      padding: 8px 0;
      span {
        flex-basis: 15%;
        text-align: center;
        font-size: 20px;
        color: #acacac;
      }
      input {
        flex-grow: 1;
        border: none;
        background-color: #eee;
        outline: none;
        font-size: 14px;
      }
      button {
        background-color: #eee;
        padding: 4px 12px;
        box-sizing: border-box;
        font-size: 14px;
        border: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
    }
  }
}
</style>